import React, { useState } from 'react'
import '../css/Lbx_Kfp2.css'
import { LeftOutline } from 'antd-mobile-icons'
import { Popup, Result } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'

export default function Kfp2() {
    let navigate = useNavigate()
    let [num, setNum] = useState(0)
    let [num1, setNum1] = useState(0)
    let [visible7, setVisible7] = useState(false)
    return (
        <div id='kfp2'>
            <div className='top'>
                <LeftOutline onClick={() => { navigate(-1) }} /><div>
                    开发票
                </div><div className='kfp'></div>
            </div>
            {
                num1 === 0 ? <div>
                    <div className="main">
                        <li><span>抬头类型：</span><span><input type='radio' checked={num === 0 ? true : false} onChange={() => { setNum(0) }} /> 企业单位 <input type='radio' checked={num === 1 ? true : false} onChange={() => { setNum(1) }} /> 个人 </span></li>
                        {
                            num === 0 ? <div>
                                <li><span>公司名称：</span><span><input placeholder='发票抬头' /></span></li>
                                <li><span>公司税号：</span><span><input placeholder='纳税人识别号' /></span></li>
                                <li><span>发票备注：</span><span><input placeholder='该内容会打印在发票上' /></span></li>
                                <li><span>电子邮箱：</span><span><input placeholder='用于向您发送电子发票' /></span></li>

                            </div> : <div>
                                <li><span>发票抬头：</span><span><input placeholder='发票抬头' /></span></li>
                                <li><span>发票备注：</span><span><input placeholder='该内容会打印在发票上' /></span></li>
                                <li><span>电子邮箱：</span><span><input placeholder='用于向您发送电子发票' /></span></li>

                            </div>
                        }
                        <li className='juu'><span>发票总额：<span className='ju'>10.00</span>元</span><span>共<span className='ju'>1</span>张</span></li>
                        <li><span>发票总额：</span><span>10.00元</span></li>
                        <li><span>开票方式：</span><span style={{ color: '#0076ff' }}>XXX科技有限公司</span></li>
                        <li><span>发票内容：</span><span>客运服务费</span></li>
                    </div>
                    <div className="bottom">
                        <button onClick={() => { setVisible7(true) }}>提交</button>
                    </div>
                </div> : <div className='main'>
                    <Result
                        status='success'
                        title='提交成功'
                        description='您的开票请求提交成功，系统正在处理中，请稍后。您可以前往开票历史页面查看您的开票进度'
                    />
                    <div className='btn' onClick={() => { navigate('/kfp') }}>
                        <button>发票首页</button>
                        <button>开票历史</button>
                    </div>
                </div>
            }
            <Popup
                visible={visible7}
                showCloseButton
                onClose={() => {
                    setVisible7(false)
                }}
            >
                <div className='mpja'>
                    <h1>电子发票</h1>
                    <div>
                        <li><span>发票类型：</span><span>电子发票</span></li>
                        <li><span>发票抬头：</span><span>XXX科技有限公司</span></li>
                        <li><span>公司税号</span><span>9144010176192888821</span></li>
                        <div className='tishi'>
                            请确认电子邮箱无误，系统开具发票后会通过该邮箱发送
                            给您，请您注意查收，另过路桥费、高速费、停车费等
                            请向收费站和停车场索取相关发票
                        </div>
                        <button onClick={() => { setNum1(1); setVisible7(false) }}>确认提交</button>
                    </div>
                </div>
            </Popup>
        </div>
    )
}
